<template>
    <div class="page-wrap">
        <flexbox justify="space-between" align="flex-start">
            <div>
                <flexbox>
                    <span style="font-size: 16px; font-weight: bold; margin-right: 12px">{{ catalogName }}</span>
                    <div v-if="sonProList.length">
                        <a-tag color="blue" v-for="item of sonProList" :key="item.catalogCode">
                            {{ item.catalogName }}
                        </a-tag>
                    </div>
                </flexbox>
            </div>
            <div>
                <flexbox justify="flex-end">
                    <a-button type="primary" @click="() => $router.go(-1)">返回</a-button>
                    <a-button type="primary" class="margin-l-8" @click="handleCreate">新建</a-button>
                </flexbox>
                <p class="caption-font-color margin-t-8" style="font-size: 12px">提示：版本及排期的预设可应用到对应系统的预发布版本</p>
            </div>
        </flexbox>
        <div class="margin-t-16">
            <custom-table rowKey="id" size="small" autoResize :columns="tableColumns" :data-source="list" :pagination="false">
                <template #startTime="{ record }">
                    <span>{{ $filters.dateFilter(record.startTime) }}</span>
                </template>
                <template #randd="{ record }"> {{ record.randdStartTime || '暂无' }}~ {{ record.randdEndTime || '暂无' }} </template>
                <template #test="{ record }"> {{ record.testStartTime || '暂无' }}~ {{ record.testEndTime || '暂无' }} </template>
                <template #onlineTime="{ record }">
                    <span>{{ $filters.dateFilter(record.onlineTime) }}</span>
                </template>
                <template #status="{ text }">
                    <span>{{ text === '0' ? '未发布' : '已发布' }}</span>
                </template>
                <template #action="{ record }">
                    <!-- v-if="record.status === '0'" -->
                    <a @click.stop="handleEdit(record.id)">编辑</a>
                </template>
            </custom-table>
        </div>
        <create-item ref="createItemRef" @success="getList" />
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import CreateItem from './components/CreateItem.vue';
import { useRoute } from 'vue-router';
import { CustomTable } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    components: {
        CreateItem,
        CustomTable
    },
    setup() {
        const route = useRoute();
        const createItemRef = ref<any>();
        const state = reactive<any>({
            list: [],
            productLineId: null,
            catalogName: '',
            systemNames: '',
            managerEmpId: '',
            sonProList: [] //子产品
        });
        // 权限判断
        const hasAuth = computed(() => {
            return state.managerEmpId === store.getters.userInfo.employeeDTO.empId || store.getters.userInfo.roles.some((item) => ['产品经理', '研发经理'].includes(item));
        });
        const tableColumns = computed(() => {
            const tableColumns: any = [
                {
                    title: '预发布版本号',
                    dataIndex: 'versionNumber',
                    align: 'center'
                },
                {
                    title: '开始日期',
                    dataIndex: 'startTime',
                    slots: { customRender: 'startTime' },
                    align: 'center'
                },
                {
                    title: '开发阶段',
                    dataIndex: 'randd',
                    slots: { customRender: 'randd' },
                    align: 'center'
                },
                {
                    title: '测试阶段',
                    dataIndex: 'test',
                    slots: { customRender: 'test' },
                    align: 'center'
                },
                {
                    title: '上线日期',
                    dataIndex: 'onlineTime',
                    slots: { customRender: 'onlineTime' },
                    align: 'center'
                },
                {
                    title: '发布状态',
                    dataIndex: 'status',
                    slots: { customRender: 'status' },
                    align: 'center'
                }
            ];
            if (unref(hasAuth)) {
                tableColumns.push({
                    title: '操作',
                    key: 'action',
                    slots: { customRender: 'action' },
                    align: 'center'
                });
            }
            return tableColumns;
        });
        const handleCreate = () => {
            unref(createItemRef).open(state.productLineId);
        };
        const handleEdit = (id) => {
            unref(createItemRef).open(state.productLineId, id);
        };
        const getList = async () => {
            const query = {
                catalogCode: state.productLineId
            };
            const { success, moule } = await api.pbiProductCalendarModel.findByCatalogCode(query);
            if (success) {
                state.list = [...moule];
            }
        };
        const getProductLineDetail = async () => {
            const query = {
                catalogCode: route.query.id
            };
            const { success, moule } = await api.pbiProductCalendarModel.getProductCatalogByCode(query);
            if (success) {
                if (moule.subPortalProductCatalogDTOS && moule.subPortalProductCatalogDTOS.length) {
                    state.sonProList = [...moule.subPortalProductCatalogDTOS];
                }
                state.catalogName = moule.catalogName; // 当前产品名称
                state.productLineId = moule.catalogCode; // 当前产品catalogCode
                getList();
            }
        };
        getProductLineDetail();
        return {
            ...toRefs(state),
            hasAuth,
            createItemRef,
            tableColumns,
            handleCreate,
            getList,
            handleEdit
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    background: #fff;
}
</style>